<template>
  <el-dialog :before-close="addubmit" v-model="store.state.cinemaView.navBool" title="添加电影">
    <el-form :model="store.state.cinemaView.addDity" :label-width="formLabelWidth">
      <el-form-item label="影厅名" prop="name">
        <el-input v-model="addDity.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="手机" prop="date">
        <el-input v-model="addDity.date" autocomplete="off" />
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model="addDity.address" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handelsubmit">取消</el-button>
        <el-button type="primary" @click="addubmit">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import http from '@/util/api';
import { ElMessage, FormInstance } from 'element-plus';
import {
  onMounted, onUnmounted, reactive, ref,
} from 'vue';
import { useStore } from 'vuex';

const store = useStore();

const formLabelWidth = '140px';

const addDity = reactive<any>({
  id: '',
  name: '',
  date: '',
  address: '',
});

//     toggleDialog(0)
// })
const emit = defineEmits(['getlist']);
// 确认添加
const addubmit = (formEl: FormInstance | undefined) => {
  const data = {
    name: addDity.name,
    date: addDity.date,
    address: addDity.address,
  };
  http('/cinema/', 'POST', data).then((res: any) => {
    if (res.status === 201) {
      ElMessage({
        type: 'success',
        message: '添加成功！',
      });
      emit('getlist');
      Object.keys(addDity).map((item) => {
        delete addDity[item];
      });
    } else {
      ElMessage({
        type: 'error',
        message: '添加失败！',
      });
    }
    store.commit('SET_NAV');
  });
};
const handelsubmit = () => {
  store.commit('SET_NAV');
  ElMessage({
    type: 'info',
    message: '已取消！',
  });
};

onMounted(() => {
  store.commit('SET_DIALOGFalse');
});
</script>
<style scoped>
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
/* .el-input {
     width: 300px;
   } */
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
